<template>
	<view>
		<view class="product-list">
			<view class="product" v-for="(product,index) in productList" :key="product.id">
				<view @tap="toProduct(product.id)">
					<!-- header -->
					<view class="product-header">
						<view class="header-left">
							<view style="width: 78upx;height: 78upx;border-radius: 10upx;border-radius: 6rpx;">
								<!-- <open-data type="userAvatarUrl"></open-data> -->
								<image :src="product.avatarUrl" style="width: 90rpx;height: 90rpx;border-radius: 6rpx;"></image>
							</view>
							<view class="header-left-right">
								<!-- <open-data type="userNickName" style="font-size: 28upx;color: #333333;"></open-data> --> <span style="font-size: 28rpx;">{{product.nickName}}</span>
								<span style="font-size: 24upx;color: #999999;">{{product.createDate?$pin.getFriendlyTimeText(product.createDate.replace(/-/g, '/')):'createDate'}}</span>
							</view>
						</view>
						<view class="header-right">
							<image src="../static/img/time.png" style="margin-right: 10rpx;width: 21upx;height: 21upx;" mode=""></image>
							<!-- {{product.endTime}} -->
							<countdown :startTime="product.startTime" :endTime="product.endTime"></countdown>

						</view>
					</view>
					<!-- content -->
					<view class="product-content">
						<!-- <view class="common-content" style="font-size: 26rpx;color: #999999;">
							发布时间:{{product.createDate}}
						</view> -->
						<view class="common-content" style="color: #252525;font-weight:Medium;font-size: 36rpx;font-family:SourceHanSansCN-Medium">
							{{product.title}}
						</view>
						<view class="price-content" style="font-size: 30rpx;color:#FB6834;font-weight: bold;">
							<span>{{product.moneyType|getMoneyType}}</span>
							<span>{{product.priceInfo}}</span>
						</view>
						<view class="common-content" style="margin-bottom: 10rpx;" v-if="JSON.parse(product.tags).length>0">
							<span v-for="(item,index) in JSON.parse(product.tags)" :key="index" class="tagItem">{{item}}</span>
							<span v-for="(j,i) in (getTags(product.discountTags))" :key="i" class="tagItem">{{j}}</span>
						</view>

						<!-- 大图片bigImgs -->
						<view class="bigImageContent" v-if="JSON.parse(product.bigImgs).length>0">
							<!-- <image v-for="(n,j) in JSON.parse(product.bigImgs)" :key="j" mode="aspectFill" :src="n"></image> -->
							<image mode="aspectFill" :src="JSON.parse(product.bigImgs)[0]"></image>
						</view>

						<!-- 小图片 -->
						<view class="imageContent">
							<image v-for="(n,j) in (getLittleImgs(JSON.parse(product.liteImgs)))" :key="j" mode="aspectFill" :src="n"></image>
						</view>
					</view>
				</view>
				<view class="common-content"  v-if="isPublish" style="display: flex;align-items: center;margin-bottom: 20upx;justify-content: space-between;">

					<span v-if="type==0" style="font-size: 24upx;color: #999999;">冻结资金{{product.lockCoin}}</span>


					<view v-if="type==0" class="" style="display: flex;height: 68rpx;justify-content: flex-end;align-items: center;">

						<view style="padding: 10rpx;box-sizing: border-box;border-radius: 10rpx;border: 1rpx solid #42AE3C;display: flex;align-items: center;justify-content: center;height: 48rpx;margin-right: 20rpx;">
							<!-- <image src="../static/img/share/share.png" style="width: 24rpx;height: 24rpx;margin-right: 10rpx;"></image> -->

							<span style="color: #42AE3C;font-size: 24rpx;" @click="tuanModify(product.id)">团修改</span>

						</view>

						<view v-if="type==0" style="padding: 10rpx;box-sizing: border-box;border-radius: 10rpx;border: 1rpx solid #42AE3C;display: flex;align-items: center;justify-content: center;height: 48rpx;margin-right: 20rpx;">
							<!-- <image src="../static/img/share/share.png" style="width: 24rpx;height: 24rpx;margin-right: 10rpx;"></image> -->

							<span style="color: #42AE3C;font-size: 24rpx;" @click="tuanManager(product.id)">团删除</span>

						</view>

						<view v-if="type==0" style="padding: 10rpx;box-sizing: border-box;border-radius: 10rpx;border: 1rpx solid #42AE3C;display: flex;align-items: center;justify-content: center;height: 48rpx;">
							<image src="../static/img/share/share.png" style="width: 24rpx;height: 24rpx;margin-right: 10rpx;"></image>

							<slot name="product" :product="product"></slot>

						</view>

					</view>
				</view>
				<!-- 复制已有团购按钮 -->
				<view class="" v-if="fromPublishPage" style="width: 100%;height: 80rpx;background-color: #f8d146;text-align: center;line-height: 80rpx;font-size: 28rpx;color:#FFFFFF"
				 @click="seletItemBtnClick(product.id)">
					复制开团
				</view>
			</view>
		</view>
		<view class="loading-text">{{ loadingText }}</view>
	</view>
</template>

<script>
	import countdown from "./cz-countdown/cz-countdown.vue"

	export default {
		components: {
			countdown
		},
		props: {
			fromPublishPage: {
				type: Boolean,
				value: false
			},
			productDataSource: {
				type: String,
				value: ''
			},
			type: {
				type: Number,
				default: 0 //0发布 1 浏览
			},
			itemType: { //是否从发布跳转
				type: String,
				default: ''
			},
			isPublish: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				productList: [
					// {
					// 	id: 1,
					// 	time: '3分钟前',
					// 	imageUrls: [
					// 		require("../static/img/s2.jpg"),
					// 		require("../static/img/s1.jpg"),
					// 		require("../static/img/s2.jpg")
					// 	],
					// 	name: '大白菜',
					// 	price: '20-30',
					// 	keyword: '小',
					// 	taglist: ["领取优惠券", "幸运转盘", "砸金蛋"]
					// },
					// {
					// 	id: 1,
					// 	time: '3分钟前',
					// 	imageUrls: [
					// 		require("../static/img/s2.jpg"),
					// 		require("../static/img/s1.jpg"),
					// 		require("../static/img/s2.jpg")
					// 	],
					// 	name: '大白菜',
					// 	price: '20-30',
					// 	keyword: '小',
					// 	taglist: ["领取优惠券", "幸运转盘", "砸金蛋"]
					// }
				],
				loadingText: '加载中...',
				currentPage: 1,
				lastPage: 1,
				pageSize: 20
			};
		},
		filters: {
			getMoneyType(e) {

				return e == 1 ? '¥' : 'C$'
			}
		},
		onReady() {
			// this.loadProducts()
		},
		// onShow(){
		// 	this.loadProducts()

		// },
		watch: {
			productDataSource(newValue, oldValue) {
				this.productList = []
				this.loadProducts()
			}
		},
	

		methods: {
			
			// 获取小图
			getLittleImgs(list){
				
				if(list.length>3){
					return  list.splice(0,3)
				}else{
					return list
				}
				
			},
			getTags(e) {
				var tempArr = []
				var arr = e.split("")
				arr.forEach((el, index) => {
					if (el == 1) {
						tempArr.push(this.getTitle(index))
					}
				})
				return tempArr
			},

			getTitle(index) {

				switch (index) {
					case 0:
						return '团满减优惠';
						break;
					case 1:
						return '幸运大转盘';
						break;
					case 2:
						return '砸金蛋';
						break;
					default:
						return "";
						break;
				}


			},

			tuanModify(id) {
				console.log('团修改')
				// this.$emit('toPublish',{id})
				var that =this;
				this.$pin.request('GET',`istore/group/view/${id}`,null,res=>{
					
					if(res.code ==0){
						
						var tuanObj = res.data;
						
						// templist/goodsProducts/tags
						
						
						// tuanObj.goodss.forEach(el=>{
						// 	var goodsProducts = el.goodsProducts;
						// 	var specificationList = el.specificationList
						// })
					
						
						
						var goodss = tuanObj.goodss;
						
						var groupDiscounts= tuanObj.groupDiscounts;
						
						//团处理	bigImgs\tags\liteImgs
						var groupVO = tuanObj.groupVO;
						groupVO.bigImgs = groupVO.bigImgs ? JSON.parse(groupVO.bigImgs) : []; 
						groupVO.liteImgs = groupVO.liteImgs ? JSON.parse(groupVO.liteImgs) : [];
						groupVO.tags = groupVO.tags ? JSON.parse(groupVO.tags) : [];
						
						
						var memberCardVO = tuanObj.memberCardVO;
						
						// 处理金蛋shuju
						if (tuanObj.lotteryEggPO) { //金蛋数据存在
							tuanObj.lotteryEggPO.cashs = !tuanObj.lotteryEggPO.cashs ? [] : tuanObj.lotteryEggPO.cashs;
							tuanObj.lotteryEggPO.commoditys = !tuanObj.lotteryEggPO.commoditys ? [] : tuanObj.lotteryEggPO.commoditys;
							tuanObj.lotteryEggPO.coupons = !tuanObj.lotteryEggPO.coupons ? [] : tuanObj.lotteryEggPO.coupons;
						
							tuanObj.lotteryEggPO.cashs.forEach(el => {
								el.eggType = 1;
							})
							tuanObj.lotteryEggPO.commoditys.forEach(el => {
								el.eggType = 2;
							})
							tuanObj.lotteryEggPO.coupons.forEach(el => {
								el.eggType = 0;
							})
						}
						// 处理大转盘数据
						if (tuanObj.lotteryVO) {
							tuanObj.lotteryVO.cashs = !tuanObj.lotteryVO.cashs ? [] : tuanObj.lotteryVO.cashs;
							tuanObj.lotteryVO.commoditys = !tuanObj.lotteryVO.commoditys ? [] : tuanObj.lotteryVO.commoditys;
							tuanObj.lotteryVO.coupons = !tuanObj.lotteryVO.coupons ? [] : tuanObj.lotteryVO.coupons;
						
							tuanObj.lotteryVO.cashs.forEach(el => {
								el.eggType = 1;
							})
							tuanObj.lotteryVO.commoditys.forEach(el => {
								el.eggType = 2;
							})
							tuanObj.lotteryVO.coupons.forEach(el => {
								el.eggType = 0;
							})
						}
						
						var lotteryEggPO = tuanObj.lotteryEggPO;
						var lotteryVO = tuanObj.lotteryVO;
						
						that.$store.commit('clearState');
						// that.$store.commit('setGoodssList',goodssList);
						that.$store.commit('setGroupVO', groupVO);
						that.$store.commit('setLotteryEggPO', lotteryEggPO); //金蛋
						that.$store.commit('setMemberCardVO', memberCardVO); //会员卡
						that.$store.commit('setLottery', lotteryVO); //金蛋
						that.$store.commit('setDiscoutdata', groupDiscounts); //满减
						// that.$store.commit('setGoodssList', goodss); //满减
						
						
						uni.navigateTo({
							url:"../publish/publish?from=edit"
						})
						
					}
				
					
				},error=>{
					
				})
				
				
				
			},
			tuanManager(id) {
				var that = this;
				uni.showModal({
					title: '确认',
					content: '您确定删除该团吗',
					success: function(res) {
						if (res.confirm) {

							that.$pin.request('POST', 'istore/group/del', {
								id
							}, res => {
								if (res.code == 0) {
									uni.showToast({
										title: '删除成功'
									})
									that.loadProducts()

								} else {
									uni.showToast({
										title: '删除失败'
									})
								}
							}, error => {
								uni.showToast({
									title: '删除失败'
								})
							})
						}
					}
				})

			},
			// 分享
			shareClick(product) {
				console.log("分享")
				//分享到微信朋友
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 5,
					// href: "http:*******************", //这地址太长了，就省略了
					title: product.info,
					summary: product.info,
					imageUrl: product.headImg,
					// miniProgram:{
					// 	path:url: '../product/product-detail',
					// 	type:1
					// },
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			//商品跳转
			toProduct(productId) {
				if (this.itemType != "select") {
					uni.navigateTo({
						url: '../product/product-detail?productId=' + productId,
					});
				}

				// setTimeout(()=>{

				// },1000)

			},
			seletItemBtnClick(productId) {

				var that = this;
				// 获取团购详情
				this.$pin.request('GET', `istore/group/${productId}`, null, res => {

					if (res.code == 0) {
						var obj = res.data;
						var groupVO = {
							bigImgs: obj.bigImgs ? JSON.parse(obj.bigImgs) : [], //大图
							title: obj.title, //标题
							startTime: obj.startTime,
							endTime: obj.endTime,
							details: obj.details, //文字描述
							expType: obj.expType, //快递方式
							headImg: obj.headImg, //首图FF
							info: obj.info, //介绍
							liteImgs: obj.liteImgs ? JSON.parse(obj.liteImgs) : [], //小图
							moneyType: obj.moneyType, //币种1.人民币 2.加币
							tags: obj.tags ? JSON.parse(obj.tags) : [], //团购标签
							freight: obj.freight, //运费
							pickupPointId: "", //自提点
							freightLimit: "", //免运费
							addName: '', //自提点名称
						};
						var docountList = obj.docountList;
						var goodssList = obj.goodsList;

						// 处理金蛋shuju
						if (obj.lotteryEggVO) { //金蛋数据存在



							obj.lotteryEggVO.cashs = !obj.lotteryEggVO.cashs ? [] : obj.lotteryEggVO.cashs;
							obj.lotteryEggVO.commoditys = !obj.lotteryEggVO.commoditys ? [] : obj.lotteryEggVO.commoditys;
							obj.lotteryEggVO.coupons = !obj.lotteryEggVO.coupons ? [] : obj.lotteryEggVO.coupons;

							obj.lotteryEggVO.cashs.forEach(el => {
								el.eggType = 1;
							})
							obj.lotteryEggVO.commoditys.forEach(el => {
								el.eggType = 2;
							})
							obj.lotteryEggVO.coupons.forEach(el => {
								el.eggType = 0;
							})
						}
						var lotteryEggVO = obj.lotteryEggVO;

						// 处理大转盘数据
						if (obj.lotteryVO) {

							obj.lotteryVO.cashs = !obj.lotteryVO.cashs ? [] : obj.lotteryVO.cashs;
							obj.lotteryVO.commoditys = !obj.lotteryVO.commoditys ? [] : obj.lotteryVO.commoditys;
							obj.lotteryVO.coupons = !obj.lotteryEggVO.couponVOList ? [] : obj.lotteryEggVO.couponVOList;

							obj.lotteryVO.cashs.forEach(el => {
								el.eggType = 1;
							})
							obj.lotteryVO.commoditys.forEach(el => {
								el.eggType = 2;
							})
							obj.lotteryVO.coupons.forEach(el => {
								el.eggType = 0;
							})
						}

						var lotteryVO = obj.lotteryVO;
						var memberCard = obj.memberCard;
						var discoutdata = obj.discountList;
						that.$store.commit('clearState');
						// that.$store.commit('setGoodssList',goodssList);
						that.$store.commit('setGroupVO', groupVO);
						that.$store.commit('setLotteryEggPO', lotteryEggVO); //金蛋
						that.$store.commit('setMemberCardVO', memberCard); //会员卡
						that.$store.commit('setLottery', lotteryVO); //金蛋
						that.$store.commit('setDiscoutdata', discoutdata); //金蛋



						// that.$store.commit('displayAllGood',{
						// 	groupVO,
						// 	docountList,
						// 	goodssList:goodssList,
						// 	lotteryEggVO,
						// 	lotteryVO,
						// 	memberCard
						// })

						uni.navigateBack({

						})


					}
				}, error => {

				})
			},
			loadProducts(key) {

				var obj = {}
				if (key) {
					obj.key = key;
				}
				const dataSource = this.productDataSource
				let that = this
				this.$pin.request('GET', `${dataSource}`, obj, successData => {
						// var arr = []，?page=${this.currentPage}&limit=${this.pageSize}
						// if (this.type == 0) { // 发布
						// 	arr = successData.data
						// } else { //浏览
						// 	successData.data.forEach((el, index) => {
						// 		arr.push(el.groupVO)
						// 	})
						// }
						that.productList = successData.data
						if (this.currentPage >= this.lastPage) {
							this.loadingText = '-到底了-';
							return false;
						}
					},
					failData => {
						console.log(failData)
						uni.showToast({
							icon: 'none',
							title: '加载商品出错'
						})
					}
				)
			},
			loadNextPage(key) {
				let len = this.productList.length;
				if (this.currentPage >= this.lastPage) {
					this.loadingText = '-到底了-';
					return false;
				}
				this.currentPage++;
				this.loadProducts()
			},
		}
	}
</script>

<style lang="scss">
	.shareBtn {
		&::after {
			border: none;
		}

		;
		background-color: #FFFFFF;
		alpha:0;
	}

	// .iconfont {
	// 	background-image: url("../static/img/fenxiang.png");
	// 	width: 40rpx;
	// 	height: 40rpx;
	// 	padding: 0;
	// 	position: absolute;
	// 	right: 50rpx;
	// 	top: 15upx;
	// 	margin: auto;
	// 	background-size: 40rpx 40rpx;
	// 	background-repeat: no-repeat;
	// }

	.product-list {
		width: 92%;
		padding: 0 4% 3vw 4%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: space-between;
		// flex-wrap: wrap;

		.product {
			width: 100%;
			background-color: #fff;
			margin: 0 0 15upx 0;
			border-radius: $pin-border-radius;
			box-shadow: $pin-shadow;
			padding: 16upx 18upx;
			box-sizing: border-box;

			.product-header {

				width: 100%;
				display: flex;
				height: 25%;
				justify-content: space-between;
				align-items: center;
				height: 110upx;
				// padding: ;

				.header-left {
					flex: 1;
					display: flex;
					align-items: center;

					.header-left-right {
						display: flex;
						flex-direction: column;
						// align-items: center;
						margin-left: 30rpx;
					}
				}

				.header-right {
					// width: 40%;
					height: 100%;
					// text-align: right;
					color: #5BB1FC;
					font-size: 24upx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

				}
			}

			.product-content {
				.bigImageContent {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						margin-bottom: 10rpx;
						width: 100%;
					}
				}

				.imageContent {
					display: flex;
					width: 100%;
					align-items: center;
					padding: 10rpx 0;
					box-sizing: border-box;

					image {
						margin-right: 10upx;
						width: 30%;
						height: 140upx;
					}
				}

				.common-content {
					display: flex;
					align-items: center;
					width: 100%;
					// padding: 10rpx 0;
					box-sizing: border-box;

					.tagItem {
						margin-right: 10upx;
						border: 1upx solid #FB6834;
						color: #FB6834;
						font-size: 24upx;
						padding: 0 10upx;
					}
				}
			}



		}
	}
</style>
